<template>
  <div class="station">
    <!--    所有台站状态总览-->
    <div class="total-status">
      <div class="show-level R-status" :style="R_img" @click="clickRpan('R:')"><span>R</span></div>
      <div class="show-level S-status" :style="S_img" @click="clickRpan('S:')"><span>S</span></div>
      <div class="show-level T-status" :style="T_img" @click="clickRpan('T:')"><span>T</span></div>
      <div class="show-level U-status" :style="U_img" @click="clickRpan('U:')"><span>U</span></div>
      <div class="show-level V-status" :style="V_img" @click="clickRpan('V:')"><span>V</span></div>
      <div class="show-level W-status" :style="W_img" @click="clickRpan('W:')"><span>W</span></div>
      <div class="show-level X-status" :style="X_img" @click="clickRpan('X:')"><span>X</span></div>
      <div class="show-level Y-status" :style="Y_img" @click="clickRpan('Y:')"><span>Y</span></div>
      <div class="show-level Z-status" :style="Z_img" @click="clickRpan('Z:')"><span>Z</span></div>
    </div>
    <!--  上部分时间选择框-->
    <div class="top-dataPicker">
      <div class="dataPicker">
        <span style="color: #fff;font-weight: bold">选择日期:</span>
        <label>
          <input type="date" v-model="refresh_time" v-on:input="switchStatus"/>
        </label>
      </div>
    </div>
    <!--  状态文字表示-->
    <div class="status-words">
      <el-table class="table" width="100%" :data="this.status_group">
        <el-table-column
            label="盘符" width="40" prop="pan_fu">
        </el-table-column>
        <el-table-column
            label="地点" width="60" prop="location">
        </el-table-column>
        <el-table-column
            label="状态" width="50" prop="status">
        </el-table-column>
        <el-table-column
            label="总空间" width="60" prop="total_sto">
        </el-table-column>
        <el-table-column
            label="使用空间" width="60" prop="used_sto">
        </el-table-column>
        <el-table-column
            label="剩余空间" width="60" prop="unused_sto">
        </el-table-column>
        <el-table-column
            label="网速" width="55" prop="net_speed">
        </el-table-column>
      </el-table>
    </div>
    <!--  台站状态echarts表示-->
    <div class="status-charts">
      <div class="pie" ref="storage_pie"></div>
    </div>
    <div class="status-charts">
      <div class="pie" ref="netspeed_pie"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import axios from "axios";
import qs from "qs";
import {Toast} from 'mint-ui';
import {Indicator} from "mint-ui";
//引入全局变量
import globalObj from "@/common";

export default {
  name: "Station",
  data() {
    return {
      refresh_time: "2020-11-28",
      pan_fu: "Z",
      location: "工业广场",
      status: "online",
      total_sto: "1863G",
      used_sto: "467G",
      unused_sto: "1395G",
      net_speed: "14.63Mbps",
      status_group:[{
        refresh_time: "2020-11-28",
        pan_fu: "Z",
        location: "工业广场",
        status: "online",
        total_sto: "1863G",
        used_sto: "467G",
        unused_sto: "1395G",
        net_speed: "14.63Mbps",
      }],
      R_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      S_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      T_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      U_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      V_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      W_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      X_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      Y_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      },
      Z_img: {
        backgroundImage: "",
        backgroundSize: "100% 100%"
      }
    };
  },
  mounted() {
    Indicator.open("正在加载");
    setTimeout(() => {
      Indicator.close();
    }, 2000);
    //请求数据
    axios.post(
        'http://www.cdmw-lnu.cn:8999/appServer/req_getStaion_warning.do',
        qs.stringify({
          spot_name: globalObj.spot_name,
          refresh_time: this.refresh_time
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }).then(res => {
      //设置状态图片
      this.R_img.backgroundImage = "url(" + res.data[0].img + ")";
      this.S_img.backgroundImage = "url(" + res.data[1].img + ")";
      this.T_img.backgroundImage = "url(" + res.data[2].img + ")";
      this.U_img.backgroundImage = "url(" + res.data[3].img + ")";
      this.V_img.backgroundImage = "url(" + res.data[4].img + ")";
      this.W_img.backgroundImage = "url(" + res.data[5].img + ")";
      this.X_img.backgroundImage = "url(" + res.data[6].img + ")";
      this.Y_img.backgroundImage = "url(" + res.data[7].img + ")";
      this.Z_img.backgroundImage = "url(" + res.data[8].img + ")";
      //将离线状态的盘符存入全局变量中
      globalObj.offline_panFu=[];
      if (this.R_img.backgroundImage === globalObj.offline_image_url){
          globalObj.offline_panFu.push("R:");
      }if (this.S_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("S:");
      }
      if (this.T_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("T:");
      }if (this.U_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("U:");
      }if (this.V_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("V:");
      }if (this.W_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("W:");
      }if (this.X_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("X:");
      }if (this.Y_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("Y:");
      }if (this.Z_img.backgroundImage === globalObj.offline_image_url){
        globalObj.offline_panFu.push("Z:");
      }
      Toast({
        message: '正在显示' + this.refresh_time + '台站工况信息',
        position: 'top',
        duration: 2000
      });
    });
    //页面初始化加载
    let storagePieChart = echarts.init(this.$refs.storage_pie);
    let netspeedPieChart = echarts.init(this.$refs.netspeed_pie);
    //存储空间显示仪表盘
    storagePieChart.setOption({
      title: {
        text: "硬盘使用率",
        left: "center",
        textStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      toolbox: {
        feature: {
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          radius: "90%",
          center: ["50%", "60%"],
          name: "硬盘容量",
          type: "gauge",
          detail: {formatter: "{value}%", fontSize: 15},
          data: [{value: 15}],
        },
      ],
    });
    //网速显示仪表盘
    netspeedPieChart.setOption({
      title: {
        text: "网速",
        left: "center",
        textStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      toolbox: {
        feature: {
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          radius: "90%",
          center: ["50%", "60%"],
          name: "网速",
          type: "gauge",
          detail: {
            formatter: "{value}%",
            fontSize: 20,
          },
          data: [{value: 95}],
        },
      ],
    });
  },
  methods: {
    //日期改变即调用函数
    switchStatus: function () {
      Indicator.open("正在加载");
      setTimeout(() => {
        Indicator.close();
      }, 2000);
      //判断时间是否大于2025或者小于2018年 不符合规则直接拦截Toast通知哪个大傻逼
      var time = new Date(this.refresh_time);
      var upLimit = new Date("2022-01-01");
      var lowLimit = new Date("2019-06-06");
      if (time > upLimit) {
        Toast({
          message: '日期过大，请重新选择！',
          position: 'middle',
          duration: 3000
        });
      } else if (time < lowLimit) {
        Toast({
          message: '日期过小，请重新选择！',
          position: 'middle',
          duration: 3000
        });
      } else {
        //时间区间合理，进行请求
        axios.post(
            'http://www.cdmw-lnu.cn:8999/appServer/req_getStaion_warning.do',
            qs.stringify({
              spot_name: globalObj.spot_name,
              refresh_time: this.refresh_time
            }), {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
            }).then(res => {
          //假设没有加载到数据——处理
          if (res.data.length === 0) {
            Toast({
              message: '未加载到'+this.refresh_time+'台站工况信息',
              position: 'top',
              duration: 2000
            });
            //将状态图片设置成离线状态
            let offline_image_url="http://www.cdmw-lnu.cn/images/levelImages/level_one_warning.png";
            this.R_img.backgroundImage = "url("+offline_image_url+")";
            this.S_img.backgroundImage = "url("+offline_image_url+")";
            this.T_img.backgroundImage = "url("+offline_image_url+")";
            this.U_img.backgroundImage = "url("+offline_image_url+")";
            this.V_img.backgroundImage = "url("+offline_image_url+")";
            this.W_img.backgroundImage = "url("+offline_image_url+")";
            this.X_img.backgroundImage = "url("+offline_image_url+")";
            this.Y_img.backgroundImage = "url("+offline_image_url+")";
            this.Z_img.backgroundImage = "url("+offline_image_url+")";
            //将盘符状态全局变量全部塞进去——先将其置空
            globalObj.offline_panFu=[];
            globalObj.offline_panFu.push("R:");
            globalObj.offline_panFu.push("S:");
            globalObj.offline_panFu.push("T:");
            globalObj.offline_panFu.push("U:");
            globalObj.offline_panFu.push("V:");
            globalObj.offline_panFu.push("W:");
            globalObj.offline_panFu.push("X:");
            globalObj.offline_panFu.push("Y:");
            globalObj.offline_panFu.push("Z:");
          } else {
            //设置状态图片
            this.R_img.backgroundImage = "url(" + res.data[0].img + ")";
            this.S_img.backgroundImage = "url(" + res.data[1].img + ")";
            this.T_img.backgroundImage = "url(" + res.data[2].img + ")";
            this.U_img.backgroundImage = "url(" + res.data[3].img + ")";
            this.V_img.backgroundImage = "url(" + res.data[4].img + ")";
            this.W_img.backgroundImage = "url(" + res.data[5].img + ")";
            this.X_img.backgroundImage = "url(" + res.data[6].img + ")";
            this.Y_img.backgroundImage = "url(" + res.data[7].img + ")";
            this.Z_img.backgroundImage = "url(" + res.data[8].img + ")";
            //设置离线状态全局变量
            globalObj.offline_panFu=[];
            if (this.R_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("R:");
            }if (this.S_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("S:");
            }
            if (this.T_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("T:");
            }if (this.U_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("U:");
            }if (this.V_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("V:");
            }if (this.W_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("W:");
            }if (this.X_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("X:");
            }if (this.Y_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("Y:");
            }if (this.Z_img.backgroundImage === globalObj.offline_image_url){
              globalObj.offline_panFu.push("Z:");
            }
            Toast({
              message: '正在显示' + this.refresh_time + '台站工况信息',
              position: 'top',
              duration: 2000
            });
          }
        })
      }
    },
    //触发R台站显示(如果是离线状态的则直接在前端处理不需要与后端交互)
    clickRpan:function (pan_fu){
      //首先判断当前盘符是否为离线状态
      //假如当前点击盘符存在于离线盘符数组中，弹出离线状态提示框
      if (globalObj.offline_panFu.includes(pan_fu)){
        Toast({
          message:pan_fu+"盘处于离线状态",
          duration:2000,
          position:'top'
        });
        let offline_words="离线";
        this.pan_fu=offline_words;
        this.location=offline_words;
        this.net_speed=offline_words;
        this.status=offline_words;
        this.total_sto=offline_words;
        this.used_sto=offline_words;
        this.unused_sto=offline_words;
      } else {
        Indicator.open("正在加载");
        setTimeout(() => {
          Indicator.close();
        }, 2300);
        //否则，携带当前盘符与当前时间与后端进行交互，获取到当前盘符的具体信息
        axios.post(
            'http://www.cdmw-lnu.cn:8999/appServer/req_getStaion_panfu.do',
            qs.stringify({
              panFu:pan_fu,
              spot_name:globalObj.spot_name,
              refresh_time:this.status_group[0].refresh_time
            }),{
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
            }).then(res=>{
              //获取当前的res数据填充到下面的数据中
              //表格数据绑定
              this.status_group[0].pan_fu=res.data.panfu;
              this.status_group[0].location=res.data.location;
              this.status_group[0].net_speed=res.data.netspeed;
              this.status_group[0].status=res.data.status;
              this.status_group[0].total_sto=res.data.total;
              this.status_group[0].used_sto=res.data.used;
              this.status_group[0].unused_sto=res.data.unused;
              let stoCap=res.data.stoCapcity;
              let netCap=res.data.netStatus;
              //仪表盘动态刷新
              let storagePieChart = echarts.init(this.$refs.storage_pie);
              let netspeedPieChart = echarts.init(this.$refs.netspeed_pie);
              storagePieChart.setOption({
            title: {
              text: "硬盘使用率",
              left: "center",
              textStyle: {
                color: "#fff",
              },
            },
            tooltip: {
              formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
              feature: {
                restore: {},
                saveAsImage: {},
              },
            },
            series: [
              {
                radius: "90%",
                center: ["50%", "60%"],
                name: "硬盘容量",
                type: "gauge",
                detail: {formatter: "{value}%", fontSize: 15},
                data: [{value: stoCap}],
              },
            ],
          });
              //网速显示仪表盘
              netspeedPieChart.setOption({
            title: {
              text: "网速",
              left: "center",
              textStyle: {
                color: "#fff",
              },
            },
            tooltip: {
              formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
              feature: {
                restore: {},
                saveAsImage: {},
              },
            },
            series: [
              {
                radius: "90%",
                center: ["50%", "60%"],
                name: "网速",
                type: "gauge",
                detail: {
                  formatter: "{value}%",
                  fontSize: 20,
                },
                data: [{value: netCap}],
              },
            ],
          });
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/style/main";

@mixin topdt-compo {
  height: px2rem(64);
  width: px2rem(300);
  // border: 1px solid darkblue;
}

.station {
  background-image: url("../assets/img/bg.jpg");
  background-size: 100% 100%;
  position: relative;
  text-align: center;
  height: 100%;

  .top-dataPicker {
    display: flex;
    justify-content: center;
    height: px2rem(105);
    width: 100%;
    // border: 1px solid red;
    border-top: 1px solid gray;

    .dataPicker {
      @include topdt-compo;

      input {
        height: px2rem(58);
        border-radius: 5px;
      }
    }
  }

  .status-words {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    height: px2rem(110);
    width: 100%;
    border-top: 1px solid gray;
    .table{
      height: px2rem(110);
      width: 100%;
      border: 1px solid #fff;
    }
  }

  .status-charts {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: px2rem(400);
    border-top: 1px solid gray;

    .pie {
      height: px2rem(400);
      width: px2rem(500);
      margin: 0 auto;
      border: 1px solid #fff;
      border-radius: 5px;
    }
  }

  .total-status {
    height: px2rem(64);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: px2rem(30);

    .show-level {
      height: px2rem(70);
      width: px2rem(70);
      background-image: url("../assets/img/level_one_warning.png");
      background-size: 100% 100%;
      margin-left: px2rem(10);
    }
  }
}
</style>
